<template>
    <div class="cham-middle">
        <div id="report-first">
            <div id="report-first-left">
                <!--        中间模块-->
                <div class="block" style="width:470px;">
                    <!--            <span class="demonstration">Click 指示器触发</span>-->
                    <el-carousel trigger="click" height="200px" arrow="never" >
                        <el-carousel-item v-for="item in resSpecial" :key="item.videoId" style="cursor:pointer">
                            <div style="width:470px;height:200px;">
                                <div class="baiyechuang-title ziti-miaobian" @click="doSplit(item)">{{item.videoTitle}}</div>
                                <img :src="item.img470x200" height="200" width="470" @click="doSplit(item)"/>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div id="report-first-right">

                <div class="normal-report-1">
                    <showHoverMaskWithCharacters v-if="resTop6.length>0" :videoInfo="resTop6[0]"></showHoverMaskWithCharacters>
                </div>

                <div class="normal-report-1">
                    <showHoverMaskWithCharacters v-if="resTop6.length>1" :videoInfo="resTop6[1]"></showHoverMaskWithCharacters>
                </div>

                <div class="normal-report-1">
                    <showHoverMaskWithCharacters v-if="resTop6.length>2" :videoInfo="resTop6[2]"></showHoverMaskWithCharacters>
                </div>

                <div class="normal-report-1">
                    <showHoverMaskWithCharacters v-if="resTop6.length>3" :videoInfo="resTop6[3]"></showHoverMaskWithCharacters>
                </div>

                <div class="normal-report-1">
                    <showHoverMaskWithCharacters v-if="resTop6.length>4" :videoInfo="resTop6[4]"></showHoverMaskWithCharacters>
                </div>

                <div class="normal-report-1">
                    <showHoverMaskWithCharacters v-if="resTop6.length>5" :videoInfo="resTop6[5]"></showHoverMaskWithCharacters>
                </div>
            </div>
        </div>

        <div id="report-second">
            <reportSecondChild :reportIndex="1"></reportSecondChild>
            <reportSecondChild :reportIndex="2"></reportSecondChild>
            <reportSecondChild :reportIndex="3"></reportSecondChild>
            <reportSecondChild :reportIndex="4"></reportSecondChild>
            <reportSecondChild :reportIndex="5"></reportSecondChild>
            <reportSecondChild :reportIndex="6"></reportSecondChild>
            <reportSecondChild :reportIndex="7"></reportSecondChild>
            <reportSecondChild :reportIndex="8"></reportSecondChild>
            <reportSecondChild :reportIndex="9"></reportSecondChild>
            <reportSecondChild :reportIndex="10"></reportSecondChild>
        </div>
        <div id="report-third">
            <reportThirdChild :reportIndex="1"></reportThirdChild>
            <reportThirdChild :reportIndex="2"></reportThirdChild>
            <reportThirdChild :reportIndex="3"></reportThirdChild>
            <reportThirdChild :reportIndex="4"></reportThirdChild>
            <reportThirdChild :reportIndex="5"></reportThirdChild>
            <reportThirdChild :reportIndex="6"></reportThirdChild>
            <reportThirdChild :reportIndex="7"></reportThirdChild>
            <reportThirdChild :reportIndex="8"></reportThirdChild>
            <reportThirdChild :reportIndex="9"></reportThirdChild>
            <reportThirdChild :reportIndex="10"></reportThirdChild>
        </div>


<!--        <showHoverMaskWithOutCharacters></showHoverMaskWithOutCharacters>-->
    </div>
</template>

<script>

    import showHoverMaskWithCharacters from "@/components/showHoverMaskWithCharacters";
    import showHoverMaskWithOutCharacters from "@/components/showHoverMaskWithOutCharacters";
    import reportSecondChild from "@/components/reportSecond/reportSecondChild";
    import reportThirdChild from "@/components/reportThird/reportThirdChild";


    export default {
        components:{showHoverMaskWithCharacters,showHoverMaskWithOutCharacters,reportSecondChild,reportThirdChild},
        name: 'chamMiddle',
        data () {
            return {
                resTop6:[],
                resSpecial:[]

            }
        },
        methods:{
            doSplit(item){
                var self = this;
                var localStorage = window.localStorage;
                // debugger;
                localStorage.setItem("videoInfo",JSON.stringify(item));
                // localStorage.setItem("videoTitle",item.videoTitle);
                this.$router.push("/chamVideo");
                var formData = new FormData();
                formData.append("videoId",item.videoId);
                self.$api.post('video-service/videoController/addBofangCount',formData,result=>{
                });
            }
        },
        mounted(){
            var self = this;
            self.$api.get('video-service/videoController/getVideoInfoTop6',null, result => {
                self.resTop6 = result;
            });

            self.$api.get('video-service/videoController/getVideoInfoSpecial',null, result => {
                self.resSpecial = result;
                for(var index in self.resSpecial){
                    if(self.resSpecial[index].videoTitle.length>15){
                        self.resSpecial[index].videoTitle = self.resSpecial[index].videoTitle.substring(0,14)+"...";
                    }
                }
                // debugger;
            });
        }
    }
</script>

<style scoped>
    .cham-middle{
        width:999px;
        min-height:1000px;
        margin:auto auto;
        /*background-color:red*/
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    #report-first{
        width:999px;
        height:215px;
    }

    #report-first-left{
        float:left;
        width:470px;
        height:200px;
    }

    #report-first-right{
        margin-left:4px;
        float:left;
        width:525px;
        height:200px;
    }

    .normal-report-1{
        float:left;
        margin-left:5px;
        width:170px;
        height:100px;
    }

    #report-second{
        width:670px;
        min-height:550px;
        float:left;
    }

    #report-third{
        width:324px;
        margin-left:5px;
        min-height:550px;
        float:left;
    }

    .baiyechuang-title{
        width:200px;
        height:20px;
        line-height:20px;
        margin-top:175px;
        margin-left:5px;
        float:left;
        position:absolute;

    }

    .ziti-miaobian{
        text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    }

</style>
